export default {
    type: [
        {
            'name': 'inputType',
            'nick': '输入框'
        },
        {
            'name': 'selectType',
            'nick': '选择框'
        },
        {
            'name': 'uploadType',
            'nick': '上传组件'
        },
        {
            'name': 'radioType',
            'nick': '单选组件'
        },
        {
            'name': 'checkboxType',
            'nick': '多选组件'
        },
        {
            'name': 'textareaType',
            'nick': '文本框'
        }
    ],
    cont: {
        'inputType': {
            name: 'inputType',
            default: '输入框',
            ifrightbutton: 0
        },
        'selectType': {
            name: 'selectType',
            default: '选择框',
            ifrightbutton: 0
        },
        'uploadType': {
            name: 'uploadType',
            default: '上传组件',
            ifdub: 0
        },
        'radioType': {
            name: 'radioType',
            default: '单选组件'
        },
        'checkboxType': {
            name: 'checkboxType',
            default: '多选组件',
            count: 2
        },
        'textareaType': {
            name: 'textareaType',
            default: '文本框'
        },
    },
    //computed方法
    decodePagecode() {

        var _fn = (item) => {
            var code = ''
            if (item.name == 'inputType') {
                code += `
            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            ${item.nick}
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="cellinput">
                            <input type="text" style="width: 100%;font-size: 16px;" placeholder="输入框" readonly>
                        </div>
                    </div>
                    <div class="cellwrap" style="${item.ifrightbutton ? '' : 'display:none'}">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            获取验证码
                        </div>
                    </div>
                </div>
            </div>
                `
            }
            if (item.name == 'selectType') {
                code += `
            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                        ${item.nick}
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="cellinput">
                            <select name="" id="" style="width: 100%;pointer-events: none;">
                                <option value="请选择">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
                `
            }
            if (item.name == 'uploadType') {
                code += `
            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: left;">
                            上传图片
                        </div>
                        <div class="tablewrap">
                            <div class="cellwrap" style="${item.ifdub ? 'width:50%' : 'width:100%'}">
                                <div class="cellinput">
                                    <div class="uploads">+</div>
                                </div>
                            </div>
                            ${item.ifdub ? `
                            <div class="cellwrap" style="width: 50%;">
                                <div class="cellinput">
                                    <div class="uploads">+</div>
                                </div>
                            </div>
                            `: ''}
                        </div>
                    </div>
                </div>
            </div>
                `
            }
            if (item.name == 'radioType') {
                code += `
            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            单选项
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 50%;">
                        <div class="cellinput">
                            <input type="radio" name="1" style="margin-right: 10px;">单选项
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 50%;">
                        <div class="cellinput">
                            <input type="radio" name="1" style="margin-right: 10px;">单选项
                        </div>
                    </div>
                </div>
            </div>
                `
            }
            if (item.name == 'checkboxType') {
                code += `
            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            复选框
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="floatwrap">
                            <div class="cellwrap" style="width: 50%;" v-for="v in 2">
                                <div class="cellinput">
                                    <input type="checkbox" style="margin-right: 10px;">复选框
                                </div>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </div>
            </div>
                `
            }
            if (item.name == 'textareaType') {
                code += `
            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            文本框
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="cellinput">
                            <textarea style="width: 100%;height:200px;font-size: 16px;resize: none;" placeholder="文本框"
                                readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
                `
            }
            return code
        }

        //======================

        var code = `
<template>
    <div>

        <div class="page">

        `
        this.leftdata.map((item) => {
            code += _fn(item)
        })
        code += `

        </div>

    </div>
</template>
        `
        code += `
<style scoped>
    .page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        z-index: 8;
    }

    .inputwrap {
        padding: 20px 20px 0;
    }

    .tablewrap {
        display: table;
        width: 100%;
        background-color: white;
    }

    .cellwrap {
        display: table-cell;
        vertical-align: top;
    }

    .floatwrap {
        width: 100%;
        background-color: white;
        cursor: pointer;
    }

    .floatwrap .cellwrap {
        display: block;
        float: left;
    }

    .cellinput {
        padding: 10px;
    }

    .uploads {
        height: 120px;
        line-height: 120px;
        text-align: center;
        font-size: 50px;
        font-weight: 800;
        color: #999;
        user-select: none;
    }
</style>
        `
        return code
    }
}